<template>
  <nav v-if="showNav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
    <el-button type="text" @click="handleLogout" class="logout-btn">退出登录</el-button>
  </nav>
  <router-view/>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { removeToken } from '@/utils/auth'
import { ElMessageBox } from 'element-plus'

const router = useRouter()
const route = useRoute()

// 在登录页面不显示导航栏
const showNav = computed(() => route.name !== 'Login')

const handleLogout = () => {
  ElMessageBox.confirm('确定要退出登录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    removeToken()
    router.push('/login')
  }).catch(() => {})
}
</script>

<style lang="less">
// 移动端适配基础样式
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  margin: 0;
  padding: 0;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// 禁用默认的触摸事件
* {
  touch-action: pan-y;
}

#app {
  width: 100%;
  min-height: 100vh;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}

// 移动端通用样式
@media screen and (max-width: 768px) {
  nav {
    padding: 15px;
  }
}

.logout-btn {
  margin-left: 20px;
}

@media screen and (max-width: 768px) {
  .logout-btn {
    margin-left: 10px;
  }
}
</style>
